<template>
  <div class="echarts">
    <div class="box1">
      <div :id="index" class="table"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option1: {},
      legendList1: [],
      index: Math.random() * 10000 + 'A',
    }
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    num: {
      type: Number,
      default: 0,
    },
    PropData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    index() {
      this.init()
    },
    PropData(val) {
      this.init()
      console.log('pieData :>> ', val)
    },
  },
  created() {},
  mounted() {
    console.log('this.pieData :>> ', this.PropData)
    this.legendList1 = []
    this.PropData.map((item) => {
      this.legendList1.push(item.name)
    })
    this.init()
  },
  methods: {
    init() {
      this.initOPtions()
      this.table1()
    },
    table1() {
      if (this.index) {
        let id = this.index.toString()
        console.log('this.index :>> ', id)
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(id))
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(this.option1)
      }
    },
    initOPtions() {
      const that = this
      // 数据变化
      this.option1 = {
        // title: {
        //   text: 'Scheme Statistics',
        //   left: 'center',
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: that.legendList1.length >= 0 ? that.legendList1 : [],
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: that.PropData.length >= 0 ? that.PropData : [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.echarts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .box1 {
    width: 100%;
    height: 100%;
  }

  .table {
    width: 100%;
    height: 100%;
  }
}
</style>
